<template>
	<view class="big_wrapper">
		<view class="bg">
		</view>
		<view class="wrapper">
			<view class="item">
				<view class="title">
					订单号
					<view class="yellow">
					</view>
				</view>
				<view class="data">
					{{order_sn}}
				</view>
			</view>
			<view class="item marginT">
				<view class="title">
					包裹查验
					<view class="yellow">
					</view>
				</view>
				<view class="image_wrapper">
					<view class="img1" v-if="isSelect" v-for="(item,index) in img_01" 
					:key="index">
						<image :src="item" mode=""></image>
						<view class="delete" @click="delete1(index)">
							<image src="../../../static/image/delete1.png" mode=""></image>
						</view>
					</view>
					<view class="upload" @click="uploadimg1">
						<view class="image">
							<image src="../../../static/image/zhaopian-4@2x.png" mode=""></image>
						</view>
						<view class="text">
							拍照上传
						</view>
					</view>
				</view>
			</view>
			<view class="item marginT">
				<view class="title">
					新包裹图片上传
					<view class="yellow">
					</view>
				</view>
				<view class="image_wrapper">
					<view class="img1" v-if="isSelect1" v-for="(item1,indexZ) in img_02" :key="indexZ">
						<image :src="item1" mode=""></image>
						<view class="delete" @click="delete2(index)">
							<image src="../../../static/image/delete1.png" mode=""></image>
						</view>
					</view>
					<view class="upload" @click="uploadimg2">
						<view class="image">
							<image src="../../../static/image/zhaopian-4@2x.png" mode=""></image>
						</view>
						<view class="text">
							新自拍照片上传
						</view>
					</view>
				</view>
			</view>
			<u-form :model="packageData" label-width="200" :border-bottom="false">
				<view class="item marginT paddingB">
					<view class="title">
						新包裹物流单号
						<view class="yellow">
						</view>
					</view>
					<view class="input">
						<u-input v-model="packageData.new_order_sn" placeholder="请输入新包裹物流单号" />
					</view>
				</view>
				<view class="item marginT borderB  paddingB">
					<view class="title border_bottom">
						其他信息
						<view class="yellow1">
						</view>
					</view>
					<view class="middle_wrapper inlineInput">
							<view class="label">
								体积
							</view>
							<view class="input_wrapper">
								<view class="input1">
									<u-input type="digit"
									 v-model="packageData.package_length"
									 input-align="center"
									 placeholder="长cm"/>
								</view>
								<view class="input1 input2">
									<u-input type="digit"
									  v-model="packageData.package_width"
									  input-align="center"
									  placeholder="宽cm"/>
								</view>
								<view class="input1 input2">
									<u-input type="digit"
									   v-model="packageData.package_height"
									   input-align="center"
									   placeholder="高cm"/>
								</view>
							</view>
					</view>
					<view class="middle_wrapper">
						<u-form-item label="重量" :border-bottom="false">
							<u-input type="digit"
							 v-model="packageData.package_weigh"
							 input-align="right"
							 placeholder="请输入重量kg"/>
						</u-form-item>
					</view>
					<view class="middle_wrapper input">
						<u-form-item label="运输方式" :border-bottom="false">
							 <u-action-sheet :list="typeList" v-model="isShowList" @click="getIndexGoods"></u-action-sheet>
						</u-form-item>
						<view class="icon">
							<view @click="toShowList"
							:class="packageData.ys_type?'sview':'input_active'">
								{{packageData.ys_type?packageData.ys_type:"请选择运输方式"}}
							</view>
							<image src="../../../static/image/xiangyou1.png" mode=""></image>
						</view>
					</view>
					<view class="middle_wrapper borderB">
						<u-form-item label="价格" :border-bottom="false">
							<u-input type="digit"
							 v-model="packageData.price"
							 input-align="right"
							 placeholder="请输入价格"/>
						</u-form-item>
					</view>
				</view>
			</u-form>
		</view>
		<view class="submit" @click="submitOrder">
			<button>提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img_01:[],
				img_02:[],
				order_sn:"",
				packageData:{
					order_id:"",
					img_01:"",
					new_order_sn:"",
					img_02:"",
					package_length:"",
					package_width:"",
					package_height:"",
					package_weigh:"",
					price:"",
					ys_type:""
				},
				packageInfor:"",
				typeList:[{
					text:"海运"
				},{
					text:"空运"
				}],
				isShowList:false,
				isSelect:false,
				isSelect1:false
			}
		},
		onLoad(option) {
			this.order_sn=option.orderSn
			this.packageData.order_id=option.id
		},
		methods: {
			uploadimg1(){
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
						console.log(res)
						this.img_01.unshift(...res.tempFilePaths)
						this.isSelect=true
						let img_01=[]
						for(let i=0;i<this.img_01.length;i++){
							uni.uploadFile({
								url: "https://haiwaihuoyun.weigoutong.com/api/mis/upload",
								header: {
								    "Content-Type": "multipart/form-data",
								    "token": uni.getStorageSync('token')
								},
								filePath:this.img_01[i],
								name:"file",
								success:(res)=>{
									let obj=JSON.parse(res.data);
									img_01.unshift(obj.data.url)
									if(i==this.img_01.length-1){
										this.packageData.img_01=img_01.join(",")
										console.log(this.packageData.img_01)
									}
								},
								fail: (error) => {
									console.log(error)
								}
							})
						}
				    }
				});
			},
			uploadimg2(){
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
						this.img_02.unshift(...res.tempFilePaths)
						this.isSelect1=true
						let img_02=[]
						for(let i=0;i<this.img_02.length;i++){
							uni.uploadFile({
								url: "https://haiwaihuoyun.weigoutong.com/api/mis/upload",
								header: {
								    "Content-Type": "multipart/form-data",
								    "token": uni.getStorageSync('token')
								},
								filePath:this.img_02[i],
								name:"file",
								success:(res)=>{
									let obj=JSON.parse(res.data);
									img_02.unshift(obj.data.url)
									if(i==this.img_02.length-1){
										this.packageData.img_02=img_02.join(",")
										console.log(this.packageData.img_02)
									}
								},
								fail: (error) => {
									console.log(error)
								}
							})
						}
				    }
				});
			},
			toShowList(){
				uni.hideToast()
				this.isShowList=true
			},
			getIndexGoods(index){
				this.packageData.ys_type=this.typeList[index].text
			},
			formdata(obj = {}) {
			    let result = ''
			    for (let name of Object.keys(obj)) {
					let value = obj[name];
					result += 
					'\r\n--XXX' +
					'\r\nContent-Disposition: form-data; name=\"'+ name +'\"'+ 
					'\r\n' +
					'\r\n' + value
			    }
			    return result + '\r\n--XXX--'
			},
			async submitOrder(){
				console.log(this.packageData.img_01)
				console.log(this.packageData.img_02)
				let {img_01,img_02,package_length,package_width,package_height,package_weigh,price,ys_type}=this.packageData
				if(img_01==""||package_length==""||package_width==""||package_height==""||package_weigh==""||price==""||ys_type==""){
					uni.showToast({
						title:"请把信息填写完整",
						icon:"none"
					})
					return
				}
				let packageData=this.formdata(this.packageData)
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/staff_cn/action/cl",
					header:{
						"token":token,
						'Content-Type': 'multipart/form-data; boundary=XXX'
					},
					methods:"post",
					data:packageData
				})
				console.log(data.msg)
				uni.showToast({
					title:data.msg,
					icon:"none"
				})
				setTimeout(function(){
					uni.navigateBack({
						delta:1
					})
				},500)
				
			},
			delete1(index){
				this.img_01.splice(index,1)
				this.packageData.img_01=this.img_01.join(",")
				if(this.img_01.length==0){
					this.packageData.img_01=""
					return
				}
				let img_01=[]
				for(let i=0;i<this.img_01.length;i++){
					uni.uploadFile({
						url: "https://haiwaihuoyun.weigoutong.com/api/mis/upload",
						header: {
						    "Content-Type": "multipart/form-data",
						    "token": uni.getStorageSync('token')
						},
						filePath:this.img_01[i],
						name:"file",
						success:(res)=>{
							let obj=JSON.parse(res.data);
							img_01.unshift(obj.data.url)
							if(i==this.img_01.length-1){
								this.packageData.img_01=img_01.join(",")
								console.log(this.packageData.img_01)
							}
						},
						fail: (error) => {
							console.log(error)
						}
					})
				}
			},
			delete2(index){
				this.img_02.splice(index,1)
				this.packageData.img_02=this.img_02.join(",")
				if(this.img_02.length==0){
					this.packageData.img_02=""
					return
				}
				let img_02=[]
				for(let i=0;i<this.img_02.length;i++){
					uni.uploadFile({
						url: "https://haiwaihuoyun.weigoutong.com/api/mis/upload",
						header: {
						    "Content-Type": "multipart/form-data",
						    "token": uni.getStorageSync('token')
						},
						filePath:this.img_02[i],
						name:"file",
						success:(res)=>{
							let obj=JSON.parse(res.data);
							img_02.unshift(obj.data.url)
							if(i==this.img_02.length-1){
								this.packageData.img_02=img_02.join(",")
								console.log(this.packageData.img_02)
							}
						},
						fail: (error) => {
							console.log(error)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #f1f1f1;
	z-index: -1;
}
.big_wrapper{
	padding: 30rpx;
}
.wrapper{
	background-color: #FFFFFF;
	padding: 20rpx 40rpx;
	padding-bottom: 0;
}
.marginT{
	margin-top: 30rpx;
}
.title{
	position: relative;
}
.yellow{
	position: absolute;
	width: 6rpx;
	height: 26rpx;
	background: #F7CC46;
	border-radius: 3rpx;
	left: -2%;
	top: 22%;
}
.yellow1{
	position: absolute;
	width: 6rpx;
	height: 26rpx;
	background: #F7CC46;
	border-radius: 3rpx;
	left: -2%;
	top: 12%;
}
.item{
	border-bottom: 1rpx solid rgba(0,0,0,0.1);
	padding-bottom: 30rpx;
}
.item .title{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.item .data{
	width: 208rpx;
	height: 19rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 52rpx;
}
.upload{
	width: 196rpx;
	height: 165rpx;
	background: #F1F1F1;
	border-radius: 10rpx;
	text-align: center;
	margin-top: 50rpx;
	position: relative;
}
.upload .image image{
	width: 71rpx;
	height: 71rpx;
	margin-top: 25rpx;
}
.upload .text{
	height: 20rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F7CC46;
	line-height: 52rpx;
}
.img1{
	width: 196rpx;
	height: 165rpx;
	margin-top: 50rpx;
	position: relative;
}
.delete{
	position: absolute;
	top: -15rpx;
	right: 0;
	width: 30rpx;
	height: 30rpx;
}
.img1 image{
	width: 100%;
	height: 100%;
}
.scan{
	position: absolute;
	right: 0;
	top: 0;
}
.scan image{
	width: 34rpx;
	height: 34rpx;
}
.paddingB{
	padding-bottom: 0;
}
.middle_wrapper{
	border-bottom: 1rpx solid rgba(0,0,0,0.1);
	position: relative;
}
.borderB{
	border: none;
}
.border_bottom{
	border-bottom: 1rpx solid rgba(0,0,0,0.1);
	padding-bottom: 25rpx;
}
.middle_wrapper .icon{
	display: flex;
	position: absolute;
	align-items: center;
	position: absolute;
	right: 0;
	top: 35%;
}
.sview{
	margin-right: 10rpx;
}
.input_active{
	margin-right: 10rpx;
	font-size: 28rpx;
	color: #c0c4cc;
}
.middle_wrapper .icon image{
	height: 25rpx;
	width: 14rpx;
}
.input{
	padding-right: 25rpx;
}
.submit button{
	width: 690rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
	margin-top: 20rpx;
}
.image_wrapper{
	display: flex;
	flex-wrap: wrap;
}

.inlineInput .label{
	width: 200rpx;
	margin-top: 10rpx;
	font-weight: 600;
}
.input_wrapper{
	display: flex;
	padding-top:20rpx ;
	padding-bottom: 10rpx;
}
.input1{
	border: 1rpx solid rgba(151,151,151,0.2);
}
.input2{
	margin-left: 30rpx;
}
</style>
